<template>
    <div style="width:100%;  overflow-x:scroll;">
        <div ref="lineSChart" style="height: 300px; "></div>
    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue'
import { onMounted, watch } from "vue"
import * as echarts from "echarts";

const props = defineProps({
    legendData: {
        type: Array,
        default: ()=>[],
    },
    titleTest: {
        dataS: Array,
      default: () => [],
    },
     yearData: {
        dataS: Array,
        default: ()=>[],
    },
});
const lineSChart = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value

onMounted(() => {
    // init();
})
watch(props.titleTest, (val, oldVal) => {
  if (props.titleTest.length != 0) {
    const data=props.titleTest.map((item,index) => {
    return {
      name: props.legendData[index],
      type: 'line',
      stack: `Total${index}`,
      data: item,
      label: {
        show: false,
        formatter: '{c}', // 例如只显示数值，不显示其他文本
        fontSize: 9, // 减小字体大小
      },
    }
  })
  init(data)
  }
})

function init(data: any[]) {
    // 基于准备好的dom，初始化echarts实例
    const chart = echarts.init(lineSChart.value);
    let legendData = props.legendData

    // 指定图表的配置项和数据
    const option = {

        dataZoom: [
            { //Y轴固定,让内容滚动
                type: 'slider',
                show: false,
                xAxisIndex: [0],
                start: 1,
                end: 80,//设置X轴刻度之间的间隔(根据数据量来调整)
                zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
            },
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: 80,
                zoomLock: true, //锁定区域禁止缩放
            },
        ],
        title: {
            text: '单位：万元',
            textStyle:{
                fontSize: 18,
            },
            show: false
        },
        tooltip: {
            trigger: 'axis', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            textStyle: {
                fontSize: 12 // 设置字体大小
            },
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
            showContent:true,
            triggerOn:'click',
            enterable:true,                     // 鼠标是否可以进入提示框浮层中
            borderWidth:3,
            position: function (point, params, dom, rect, size) {
                let x = point[0] - 10; // x 轴偏移量为 10
                let y = point[1] + 10; // y 轴偏移量为 10
                if (x + dom.offsetWidth > size.viewSize[0]) {
                x = size.viewSize[0] - dom.offsetWidth;
                }
                if (y + dom.offsetHeight > size.viewSize[1]) {
                y = size.viewSize[1] - dom.offsetHeight;
                }
                return [x, y];
            },
        },
        legend: {
          data: props.legendData,
          left: 50,
          top: 300,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
      
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.yearData
        },
        yAxis: {
            type: 'value'
        },
      series: [
        ...data,
          /*
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                //name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                //name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                //name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                //name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }*/
        ]
    }

    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option);
}

</script>

<style lang="less" scoped></style>
  
  